<template>
  <div>
    <!-- 1.0 面包屑  从子组件MyBreadcrumb中传值-->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>-->
    <my-breadcrumb level1="角色管理" level2="角色列表"></my-breadcrumb>
    <!-- 2.0添加角色按钮 @click="dialogVisible4Add = true" 是让点击添加按钮就显示对话框-->
    <el-button type="success" plain @click="dialogVisible4Add = true">添加角色</el-button>
    <!-- 3.0角色列表 -->
    <el-table :data="rolesList" style="width: 100%">
      <!-- 代表着一列是可以展开的 -->
      <el-table-column type="expand">
        <!-- 此时这里的作用域插槽 scoped有3个属性
        scoped.row rolesList 是遍历每一行的数据 每一个角色的数据
        scoped.col 是这一列
        scoped.$index遍历到每一行数据的索引
        -->
        <template slot-scope="scoped">
          <!-- 一级权限 -->
          <el-row v-for="item in scoped.row.children" :key="item.children.id">
            <!-- 左边列分3分 -->
            <el-col :span="3">
              <el-tag
                closable
                @close="deleteRights(scoped.$index,scoped.row.id,item.id)"
              >{{item.authName}}</el-tag>
              <i v-if="item.children.length > 0" class="el-icon-arrow-right arrow"></i>
            </el-col>
            <!-- 左边列分21分 -->
            <el-col :span="21">
              <!-- 二级权限 三级 -->
              <el-row v-for="subitem in item.children" :key="subitem.id">
                <el-col :span="4">
                  <!-- 二级权限  -->
                  <el-tag
                    class="authlist"
                    closable
                    type="success"
                    @close="deleteRights(scoped.$index,scoped.row.id,subitem.id)"
                  >{{subitem.authName}}</el-tag>
                  <i v-if="item.children.length > 0" class="el-icon-arrow-right arrow"></i>
                </el-col>
                <el-col :span="20">
                  <!-- 三级权限 -->
                  <el-tag
                    v-for="thirditem in subitem.children"
                    :key="thirditem.id"
                    closable
                    @close="deleteRights(scoped.$index,scoped.row.id,thirditem.id)"
                    type="warning"
                  >{{thirditem.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="240"></el-table-column>
      <el-table-column prop="roleDesc" label="角色描述" width="380"></el-table-column>
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            type="primary"
            size="mini"
            plain
            @click="editRoles(scope.row.id)"
          ></el-button>
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="deleteRoles(scope.row.id)"
            plain
          ></el-button>
          <el-button
            size="mini"
            icon="el-icon-check"
            type="warning"
            plain
            @click="checkRoles(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 4.0新增角色对话框 :visible.sync="dialogVisible4Add"是绑定对话框是true就显示 flase就影藏-->
    <el-dialog title="新增角色" :visible.sync="dialogVisible4Add" width="50%">
      <el-form :model="addRolesObj" :rules="rules" ref="addRolesRef" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addRolesObj.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="addRolesObj.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4Add = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 5.0 修改用户对话框 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogVisible4Edit" width="50%">
      <el-form :model="editRolesObj" :rules="rules" ref="editRolesrRef" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editRolesObj.roleName" style="width:100px"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="editRolesObj.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4Edit = false">取 消</el-button>
        <el-button type="primary" @click="editRoles2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 6.0角色授权对话框 -->
    <el-dialog title="角色授权" :visible.sync="dialogVisible4Grant" width="50%">
      <el-tree
        :data="treeRights"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="treeRightsRef"
        :default-checked-keys="checkedKeys"
        highlight-current
        :props="defaultProps"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4Grant = false">取 消</el-button>
        <el-button type="primary" @click="submitGrant">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//导入面包屑子组件
import MyBreadcrumb from '../subcomponents/MyBreadcrumb'
export default {
  //注册子组件
  components: {
    MyBreadcrumb
  },
  data() {
    return {
      rolesList: [],
      dialogVisible4Add: false,
      dialogVisible4Edit: false,
      dialogVisible4Grant: false,
      addRolesObj: {
        //添加对象时候的对象
        roleName: '',
        roleDesc: ''
      },
      editRolesObj: {
        //修改对象时候的对象
        roleName: '',
        roleDesc: ''
      },
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      treeRights: [], //所有权限(以树形结构展示),
      checkedKeys: [], //将来要选中的keys,就是角色拥有的三级权限的id
      roleId:null,
      defaultProps: {
        //配置对应的关系
        children: 'children',
        label: 'authName'
      },
      roleId: null //角色ID
    }
  },
  created() {
    this.getRolesData()
  },
  methods: {
    getRolesData() {
      //发送请求权限列表数据
      this.$axios.get('roles').then(response => {
        // console.log(response)
        //赋值给模型
        this.rolesList = response.data.data
      })
    },
    //添加角色
    addRoles() {
      // 拿到el-form这个表单
      this.$refs.addRolesRef.validate(valid => {
        if (valid) {
          // 验证通过
          this.$axios.post(`roles`, this.addRolesObj).then(res => {
            if (res.data.meta.status === 200) {
              //提示修改失败
              this.$message.error(res.data.meta.msg)
            }
            // 隐藏对话框
            this.dialogVisible4Add = false
            // 重新查询列表
            this.getRolesData()
          })
        }
      })
    },
    //修改角色 并弹出对话框
    editRoles(roleId) {
      console.log(roleId)
      this.$axios.get(`roles/${roleId}`).then(res => {
        // console.log(res)
        //赋值给模型,弹出修改框,才能填充上值
        this.editRolesObj = res.data.data
        //弹出修改的对话框
        this.dialogVisible4Edit = true
      })
    },
    //修改用户信息并提交
    editRoles2() {
      this.$axios
        .put(`roles/${this.editRolesObj.roleId}`, this.editRolesObj)
        .then(res => {
          if (res.data.meta.status !== 200) {
            //提示修改失败
            this.$message.error(res.data.meta.msg)
          } else {
            console.log(this.editRolesObj)
            this.$message({
              message: '修改用户信息成功',
              type: 'success'
            })
            //关闭对话框
            this.dialogVisible4Edit = false
            //刷新列表
            this.getRolesData()
          }
        })
    },
    //删除角色
    deleteRoles(roleId) {
      this.$confirm('是否要删除页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        this.$axios.delete(`roles/${roleId}`).then(res => {
          if (res.data.meta.status !== 200) {
            //提示删除失败
            this.$message.error(res.data.meta.msg)
          } else {
            this.$message({
              message: '删除用户信息成功',
              type: 'success'
            })
          }
          //刷新列表
          this.getRolesData()
        })
      })
    },
    //删除角色下面的权限
    deleteRights(index, roleId, rightId) {
      //发送请求
      this.$axios.delete(`roles/${roleId}/rights/${rightId}`).then(res => {
        if (res.data.meta.status !== 200) {
          //提示删除失败
          this.$message.error(res.data.meta.msg)
        } else {
          this.$message({
            message: '删除用户信息成功',
            type: 'success'
          })
        }
        //重新赋值,这里就不用全部刷新,根据index来重新赋值
        this.rolesList[index].children = res.data.data
      })
    },
    //授权角色 并展示对话框
    checkRoles(role) {
      this.roleId=role.id
      //设置要选中的key
      if (role.children && role.children.length > 0) {
        role.children.forEach(subitem => {
          if (subitem.children && subitem.children.length > 0) {
            subitem.children.forEach(thirditem => {
              if (thirditem.children && thirditem.children.length > 0) {
                thirditem.children.forEach(last => {
                  this.checkedKeys.push(last.id)
                })
              }
            })
          }
        })
      }
      this.getRolesData()
      this.$axios.get(`rights/tree`).then(res => {
        // console.log(res)
        //赋值给模型,弹出修改框,才能填充上值
        this.treeRights = res.data.data
        //弹出修改的对话框
        this.dialogVisible4Grant = true
        //设置要选中的keys[就是选中的第三级的权限ID]
        if (role.children && role.children.length > 0) {
        }
      })
    },
    //授权角色 并提交
    submitGrant() {
      //获取全选中的keys
      const checkedKeys=this.$refs.treeRightsRef.getCheckedKeys()
      //获取半选中的keys
      const halfCheckedKeys=this.$refs.treeRightsRef.getHalfCheckedKeys()
      //最后合并
      const lastKeys=checkedKeys.concat(halfCheckedKeys)
      //最后提交后台的字符串(里面包含选中和半选中的key)
      const rids=lastKeys.join(',')
      //给角色赋值发送请求
      this.$axios.post(`roles/${this.roleId}/rights`, { rids }).then(res => {
         if (res.data.meta.status !== 200) {
          //提示删除失败
          this.$message.error(res.data.meta.msg)
        } else {
          this.$message({
            message: '授权用户信息成功',
            type: 'success'
          })
          //关闭对话框
          this.dialogVisible4Grant=false
          //刷新角色列表
          this.getRolesData()
        }

      })
    }
  }
}
</script>

<style scoped>
.el-tag {
  margin-left: 5px;
  margin-top: 5px;
}
.authlist {
  border-top: solid 1px #d3dce6;
  padding-bottom: 5px;
}
.arrow {
  font-size: 16px;
  font-weight: bold;
}
</style>


